import React, { useEffect, useState, useReducer } from "react"

import PageWrapper from "./component/PageWrapper"
import SearchInfo from "./component/SearchInfo"
import MiddleContent from "./component/MiddleContent"
import FooterContent from "./component/FooterContent"
import searchReducer from "./store/searchReducer"
import middleReducer from "./store/middleReducer"
import footerReducer from "./store/footerReducer"
import {tableData,tableRData, lineData,widget} from './config'
// import Test from "./component/test"
// import { Search } from './store/middleContent';
import * as getData from './config/api/index';

const searchInfo = {
  initialValue:{
    response: 'CNY',
    grid: 'dUSD',
  },

}

const middleContent = {
  initialValue:{

  },
  tableData:[],
  widget:{},
  widgetPie:[
    {
        name:'自定义',
        value:1,
        itemColor:'#005AFF'
    },
    {
        name:'全网',
        value:5,
        itemColor:'#51F8A8'
    }
  ]
}

const footerContent = {
  initialValue:{

  },
  tableData:[],
  lineData:[]
}

export const Search = React.createContext(searchInfo)
export const Middle = React.createContext(middleContent)
export const Footer = React.createContext(footerContent)
function App() {

  const [search, searchDispatch] = useReducer(searchReducer, searchInfo)
  const [middle, middleDispatch] = useReducer(middleReducer, middleContent)
  const [footer, footerDispatch] = useReducer(footerReducer, footerContent)
  const fetch = () => {
    getData.queryExpireIp().then(res => {
      console.log(res)
    })
    getData.queryAccessIp().then(res => {
      console.log(res)
    })
    getData.queryHeadInfo().then(res => {
      console.log(res)
    })
    getData.queryIpAlert().then(res => {
      console.log(res)
    })
    getData.queryIpUseStatus().then(res => {
      console.log(res)
    })
    getData.queryOnlineUnRegisterIP().then(res => {
      console.log(res)
    })
    getData.queryTerminalComplianceRate().then(res => {
      console.log(res)
    })
  }

  useEffect(() => {
    fetch()
    // searchDispatch({type:'', payload:{}})
    // middleDispatch({type:'', payload:{...search}})
    // footerDispatch({type:'', payload:{...search}})
  }, [])
  const searchSubmit = (value:any) => {
    // searchDispatch({type:'', payload:{}})
    console.log(value);
  }

  const middleSubmit = (value) => {
    // middleDispatch({type:'', payload:{...search}})
  }
 
  const footerSubmit = (value) => {
    // footerDispatch({type:'', payload:{...search}})
  }

  return (
    <PageWrapper>

      <Search.Provider value={search}>
        <SearchInfo onSubmit={(value) =>searchSubmit(value)}></SearchInfo>
      </Search.Provider>


      <Middle.Provider value={middle}>
        <MiddleContent onSubmit={(value) =>middleSubmit(value)}></MiddleContent>
      </Middle.Provider>


      <Footer.Provider value={footer}>

        <FooterContent onSubmit={(value) =>footerSubmit(value)}/>
      </Footer.Provider>

    </PageWrapper>
  )
}

export default App
